<template>
  <scroll-dialog
    ref="dialogRef"
    :title="diaLogTitle"
    v-model:dialogVisible="diaLogVisible"
    @clickSubmit="clickSubmit"
    @close="close"
  >
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="分类名称" prop="name" required>
        <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="分类图片" prop="img">
        <img-upLoad
          v-model="form.img"
          :maxCount="1"
          :isDataWithJSON="false"
          ref="imgUpLoadRef"
        ></img-upLoad>
      </el-form-item>
    </el-form>
  </scroll-dialog>
</template>
<script lang="ts" setup>
  import { PropType, ref, watch } from 'vue'
  import {
    addNewSaleType,
    addNewGoodsType,
    addCategoryItem,
  } from '@/api/modules/shop'
  import { usePromise } from '@/hooks/core/usePromise'
  import ScrollDialog from '@/components/ScrollDialog/index.vue'
  import common from '@/utils/common'
  import { shop } from '@/types/shop'
  import imgUpLoad from '@/components/ImgFileUpload/index.vue'
  import { nextTick } from '@vue/runtime-core'
  import { ElMessage } from 'element-plus'
  const form = ref({ img: '', name: '', id: null })
  const props = defineProps({
    // diaLogVisible: {
    //   type: Boolean,
    //   default: false,
    // },
    pageWithMKT: {
      type: Boolean,
      default: false,
    },
    // 用户选择了的商品
    selItems: {
      type: Array as PropType<shop[]>,
      default() {
        return []
      },
    },
    cateGoryObject: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const diaLogTitle = ref(props.pageWithMKT ? '新建营销分类' : '新建商品分类')
  const diaLogVisible = ref()
  function initForm(cateGoryObject: any) {
    if (cateGoryObject) {
      const { id, imgUrl, name } = cateGoryObject
      if (imgUrl) form.value.img = JSON.stringify([{ url: imgUrl }])
      if (name) form.value.name = name
      if (id) form.value.id = id
      diaLogTitle.value = props.pageWithMKT ? '修改营销分类' : '修改商品分类'
    }
    diaLogVisible.value = true
  }
  defineExpose({ initForm })
  const { to } = usePromise()
  const emits = defineEmits([
    'update:modelValue',
    'addSuccess',
    'update:diaLogVisible',
  ])
  const formRef = ref()
  const rules = {
    name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  }
  if (!props.pageWithMKT) {
    // @ts-ignore
    rules.img = [
      { required: true, message: '请上传', trigger: 'blur' },
      {
        validator: () => {
          const b = form.value.img === '[]' || form.value.img === ''
          return !b
        },
        message: '请上传图片',
        trigger: 'blur',
      },
    ]
  }
  const imgUpLoadRef = ref()
  async function clickSubmit() {
    const status = imgUpLoadRef.value.getStatus()
    if (!status) {
      ElMessage.warning('图片还在上传')
      return
    }
    formRef.value.validate(async (valid: Boolean) => {
      if (valid) {
        const { img, name, id } = form.value
        const tmp: addCategoryItem = {
          name,
          imgUrl: '',
        }
        tmp.id = id as any
        if (img && JSON.parse(img).length > 0) {
          tmp.imgUrl = (JSON.parse(img)[0] as any)['url']
        }
        await common.syncAlert(tmp.id ? '是否修改分类' : '是否添加分类')
        common.XmLoading()
        const [err, res] = props.pageWithMKT
          ? await to(addNewSaleType(tmp))
          : await to(addNewGoodsType(tmp))
        common.XmLoading(false)
        if (!err) {
          emits('addSuccess', res.data)
          close()
        }
      }
    })
  }

  function close() {
    // emits('update:diaLogVisible', false)
    form.value.name = ''
    form.value.img = '[]'
    form.value.id = null
    diaLogVisible.value = false
  }
</script>
<style lang="scss" scoped></style>
